<template>
  <page-meta :root-font-size="fontSize + 'px'"></page-meta>

  <view class="page-container">
    <customHeader title="freeTalk小结" />

    <view class="scene-container" :style="{ top: height }">
      <view class="base-title">
        <text class="text">句型拓展</text>
      </view>
      <view class="option">
        <template v-for="(item, index) in pageModule.optionData" :key="index">
          <view class="item">
            <Sentence class="text" :sentence="handleSetMark(item?.sentences)"></Sentence>
            <view class="translate-text">
              <text>{{ item.translate }}</text>
            </view>
          </view>
        </template>
      </view>
      <view class="base-title">
        <text class="text">逐句测音</text>
      </view>
      <view class="overall-container">
        <view class="overall-wrapper">
          <view class="wrapper-title">评测结果</view>
          <view class="wrapper-table">
            <view class="table-header">
              <text class="header">句序</text>
              <text class="header">得分</text>
              <text class="header">录音</text>
              <text class="header">详情</text>
            </view>
            <view class="table-row" v-for="(item, index) in pageModule.audioData" :key="index">
              <view class="col">
                <view class="index">{{ index + 1 }}</view>
              </view>
              <view class="col">
                <text class="score">{{ item?.score }}</text>
              </view>
              <view class="col">
                <loudspeaker class="speaker" :voice="item.user_voice" />
              </view>
              <view class="col">
                <image class="detail" @click="pageModule.handleToDetail(item)"
                  src="https://rwstatic.tentons.cn/web/Lesson/images/detail.png" />
              </view>
            </view>
          </view>
          <view class="wrapper-tag"></view>
        </view>
      </view>
    </view>
  </view>

  <CwCommon />
</template>

<script setup lang="ts">
  import customHeader from "@/components/customHeader.vue";
  import loudspeaker from "@/components/loudspeaker.vue";
  import API from "@/api";
  import { rootFontSize } from "@/utils/util";
  import { ref, reactive } from "vue";
  import Sentence from '@/components/sentence.vue';
  import { getAnyApp } from "@/common/hooks";

  const props = defineProps({
    free_talk_id: {
      type: [String, Number],
      default: 3
    }
  });

  // 系统总模块
  const { CHEESE } = getAnyApp();

  const fontSize = rootFontSize();

  const height = ref(getApp().globalData!.pageTop);

  /**
   * 页面数据模块
   */
  const pageModule = reactive({
    optionData: [] as any[],
    audioData: [] as any[],
    async init(callback?: Function) {
      try {
        const res: any = await API.freeTalkResult({ free_talk_id: props.free_talk_id });
        this.optionData = res?.example || [];
        this.audioData = res?.list || [];
      } catch (e) {
        console.error(e);
      } finally {
        callback && callback();
      }
    },
    handleToDetail(item: any) {
      CHEESE.Router.to({
        url: CHEESE.Router.Home.scoreResult,
        params: {
          activeModal: 'scoreFreeTalkEvaluation',
          headerTitle: '评测结果',
          data: encodeURIComponent(JSON.stringify(item))
        }
      });
    }
  });

  const handleSetMark = (sentence: string) => {
    return {
      mark: {
        begin: "<b>",
        end: "</b>",
      },
      content: sentence,
    }
  }

  (() => {
    pageModule.init();
  })();
</script>

<style scoped lang="scss">
  @mixin fontStyle($size) {
    font-size: #{ $size }rem;
    font-family: xiaolai;
    color: $uni-text-color;
  }

  .page-container {
    width: 100vw;
    height: 100vh;
    background-color: #FFFFFF;

    .scene-container {
      width: 37.5rem;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      box-sizing: border-box;
      overflow-y: auto;
      padding: 2rem 20px 0 20px;
      padding-bottom: calc(constant(safe-area-inset-bottom));
      padding-bottom: calc(env(safe-area-inset-bottom));
    }

    .base-title {
      @include fontStyle(1.7);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 7.5rem;
      height: 1.8rem;
      margin-bottom: 1rem;
      background-image: url("https://rwstatic.tentons.cn/web/Lesson/images/sentence-text.png");
      background-size: cover;
      background-repeat: no-repeat;
    }

    .option {
      margin-bottom: 2rem;

      .item {
        border: #FBEED7 solid 2px;
        min-height: 5.4rem;
        border-radius: 1.2rem;
        padding: 1rem 1.5rem;
        background-color: #FFFAF2;
        box-sizing: border-box;

        &:nth-child(n + 2) {
          margin-top: 0.8rem;
        }

        >.text {
          @include fontStyle(1.5);
        }

        >.translate-text {
          margin-top: .2rem;
          @include fontStyle(1.5);
          color: $uni-text-color-grey;
        }
      }
    }

    .overall-container {

      .overall-wrapper {
        position: relative;
        margin: 1.5rem auto;
        padding-top: 2rem;
        border-image-slice: 27 27 27 27 fill;
        border-image-width: 2rem 2rem 2rem 2rem;
        border-image-outset: 0 0 0 0;
        border-image-repeat: stretch stretch;
        border-style: solid;
        border-image-source: url("https://rwstatic.tentons.cn/web/Lesson/images/sentence-wrapper.png");

        .wrapper-title {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 7.5rem;
          height: 1.8rem;
          margin: 0 auto 1.8rem;
          font-family: xiaolai;
          font-size: 1.7rem;
          color: $uni-text-color;
          background-image: url("https://rwstatic.tentons.cn/web/Lesson/images/sentence-text.png");
          background-size: contain;
          background-repeat: no-repeat;
        }

        .wrapper-table {
          padding: 0 3.2rem;
          margin-bottom: 2.8rem;

          .table-header {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 3.4rem;
            border-bottom: 1px solid #faefde;

            .header {
              display: flex;
              justify-content: center;
              width: 4rem;
              line-height: 2.4rem;
              font-family: xiaolai;
              font-size: 1.4rem;
              color: $uni-text-color;
            }
          }

          .table-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 2.7rem;
            margin-top: 1.1rem;
            margin-bottom: 1.6rem;

            .col {
              width: 4rem;
              display: flex;
              justify-content: center;

              .index {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 1.8rem;
                height: 1.8rem;
                border-radius: 50%;
                font-family: xiaolai;
                font-size: 1.4rem;
                color: $uni-text-color;
                background-color: #ffebca;
              }

              .score {
                font-family: baloo;
                font-size: 1.8rem;
                color: #bf893d;
              }

              .speaker {
                width: 3.1rem;
                height: 3.1rem;
              }

              .detail {
                width: 1.8rem;
                height: 1.8rem;
              }
            }
          }
        }

        .wrapper-tag {
          position: absolute;
          width: 8.2rem;
          height: 8.2rem;
          top: -2.5rem;
          left: 6.5rem;
          background-image: url("https://rwstatic.tentons.cn/web/Lesson/images/sentence-tag.png");
          background-size: contain;
          background-repeat: no-repeat;
        }
      }

      .overall-line {
        height: 10rem;
      }
    }
  }
</style>
